<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="学习HTML和css">
    <meta name="keywords" content="巩固HTML和css知识">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <title>首页练习</title>
</head>
<body>
    <header>
        <nav id="navbar">
            <h1><a href="index.html">首页练习</a></h1>
            <ul>
                <li>
                    <a class="current" href="index.html">首页</a>
                </li>
                <li>
                    <a href="about.html">关于我们</a>
                </li>
                <li>
                    <a href="contact.html">联系我们</a>
                </li>
            </ul>
        </nav>
        <div id="showcase">
            <div class="container">
                <div class="showcase-content">  
                    <h1>欢迎来到<span class="text-primary">首页</span></h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui accusantium ex fuga facilis architecto maiores recusandae incidunt pariatur quaerat quam?</p>
                    <a class="btn" href="about.html">关于我们</a>
                </div>
            </div>
        </div>

    </header>
    <section id="home-info" class="bg-dark">
        <div class="info-img">

        </div>
        <div class="info-content">
            <h2><span class="text-primary">首页</span>介绍</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque in iusto saepe odio dolore neque, maiores laboriosam quos accusantium ad cumque vitae omnis ex similique minima nulla assumenda illum officiis.</p>
            <a class="btn btn-light" href="about.html">阅读更多</a>
        </div>
    </section>
    <section id="features">
        <div class="box bg-light">
            <i class="fa fa-users fa-3x"></i>
            <h3>html介绍</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, dolorum.</p>
        </div>
        <div class="box bg-primary">
            <i class="fa fa-leanpub fa-3x"></i>
            <h3>CSS介绍</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, dolorum.</p>
        </div>
        <div class="box bg-light">
            <i class="fa fa-graduation-cap fa-3x"></i>
            <h3>JS介绍</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, dolorum.</p>
        </div>
    </section>
    <div class="clr"></div>
    <footer id="main-footer">
        <p>首页 &copy; 2021,All Rights Reserved</p>
    </footer>
</body>
</html>